<template>
	<div>
		<Father></Father>
		<p>------------------------------</p>
		<p>------------------------------</p>
		<p>------------------------------</p>

		<!-- 拦截器 -->
		<h1>vue-axios中拦截器的使用</h1>
		<button @click="handleClick">按钮</button>
		<div v-if="loading">loading...</div>
		<p v-else>{{title}}</p>
	</div>
</template>

<script>
	import Father from './fatherandson/Father.vue'

	import axios from 'axios'
	export default {
		name: 'HelloWorld',
		components: {
			Father
		},
		data() {
		    return {
		        title: '',
                loading: true
			}
		},
		methods: {
            handleClick() {
                axios.get('http://jsonplaceholder.typicode.com/todos/1').then(res => {
                    this.title = res.data.title
				})
			}
		},
		created() {
		    axios.interceptors.request.use(config => {
		    //    请求拦截
				this.loading = true
				return config
			})

			axios.interceptors.response.use(config => {
			//    响应拦截
				this.loading = false
				return config
			})
		}
	}
</script>

<style>

</style>
